<template>
	<view class="container">
		
		<!--tabbar-->
		<view class="tui-tabbar">
			<block v-for="(item,index) in tabbar" :key="index">
				<view class="tui-tabbar-item" :class="[tabCur==index?'tui-item-active':'']" :data-index="index" @tap="tabbarSwitch">
					<view :class="[index==0?'tui-ptop-4':'']">
						<tui-icon :name="tabCur==index?item.icon+'-fill':item.icon" :color="tabCur==index?'#E41F19':'#666'" :size="item.size"></tui-icon>
					</view>
					<view class="tui-scale">{{item.text}}</view>
				</view>
			</block>
		</view>
		<!--tabbar-->
		<view class="pay-type-list" v-for="(item,index) in billList" :key="index">
			<tui-list-cell :arrow="false" class="tui-list">
				<tui-icon name="star-fill" :size="24" color="#ff4700"></tui-icon>
				<text class="tui-list-cell-name">账单日期</text>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right">{{item.stat_date}}</tui-tag>
			</tui-list-cell>		
			<tui-list-cell :arrow="false" class="tui-list">
				<tui-icon name="star-fill" :size="24" color="#ff4700"></tui-icon>
				<text class="tui-list-cell-name">销售额</text>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right">{{item.money_total}}</tui-tag>
			</tui-list-cell>
			<tui-list-cell :arrow="false" class="tui-list">
				<tui-icon name="star-fill" :size="24" color="#ff4700"></tui-icon>
				<text class="tui-list-cell-name">订单销售额</text>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right">{{item.money_cash}}</tui-tag>
			</tui-list-cell>
			<tui-list-cell :arrow="false" class="tui-list">
				<tui-icon name="bankcard-fill" :size="24" color="#ff7900"></tui-icon>
				<text class="tui-list-cell-name">当日现金支付</text>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right">{{item.money_cash_real}}</tui-tag>
			</tui-list-cell>
			<tui-list-cell :arrow="false" class="tui-list">
				<tui-icon name="bankcard" :size="24" color="#ff7900"></tui-icon>
				<text class="tui-list-cell-name">红包金额20%</text>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right">{{item.money_free}}</tui-tag>
			</tui-list-cell>
			<tui-list-cell :arrow="false" class="tui-list">
				<tui-icon name="balloon" :size="24" color="#ff7900"></tui-icon>
				<text class="tui-list-cell-name">直推奖结余</text>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right">{{item.money_free_gap}}</tui-tag>
			</tui-list-cell>
			<tui-list-cell :arrow="false" class="tui-list">
				<tui-icon name="balloon" :size="24" color="#19be6b"></tui-icon>
				<text class="tui-list-cell-name">系统服务费</text>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right">{{item.money_system}}</tui-tag>
			</tui-list-cell>
			<tui-list-cell :arrow="false" class="tui-list">
				<tui-icon name="star-fill" :size="24" color="#19be6b"></tui-icon>
				<text class="tui-list-cell-name">税费(税率0.28%)</text>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right">{{item.money_tax}}</tui-tag>
			</tui-list-cell>
			<tui-list-cell :arrow="false" class="tui-list">
				<tui-icon name="friendadd-fill" :size="24" color="#5677fc"></tui-icon>
				<text class="tui-list-cell-name">结算金额</text>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right">{{item.money_shop}}</tui-tag>
			</tui-list-cell>
			<tui-list-cell :arrow="false" class="tui-list">
				<tui-icon name="friendadd-fill" :size="24" color="#ff7900"></tui-icon>
				<text class="tui-list-cell-name">结算状态</text>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right">{{item.status_name}}</tui-tag>
			</tui-list-cell>
		</view>
		<view class="tui-safe-area"></view>
	</view>
</template>

<script>
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import tuiListView from "@/components/thorui/tui-list-view/tui-list-view"
	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell"
	import tuiTag from "@/components/thorui/tui-tag/tui-tag"
	export default {
		components: {
			footerMenu,
			tuiIcon,
			tuiButton,
			tuiListView,
			tuiListCell,
			tuiTag
		},
		data() {
			return {
				
				shopStat: {},
				
				billList:[],
				
				//底部导航栏tabbar
				tabCur: 1,
				tabbar: [{icon: "home", text: "商家", size: 21}, 
					{icon: "people", text: "我的", size: 24}],
				
			}
		},
		computed: {
		
		},
		methods: {
			
			//底部导航栏tabbar
			tabbarSwitch: function(e) {
				let index = e.currentTarget.dataset.index;
				this.tabCur = index;
				if (index == 0) {
					uni.navigateTo({ url: '/pages/shop/stat' })
				} else {
					uni.switchTab({ url: '/pages/my/index' })
				}
			},


			//我的个人信息
			getMyBaseInfo: function() {
				uni.request({
					url: this.$apiUrl+ '/api/user/baseInfo',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
					success: (res) => {
						let resData = res.data['data'];
					}
				});
			},
			
			//我的个人信息
			getShopSettle: function() {
				uni.request({
					url: this.$apiUrl+ '/api/shop/settle',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
					success: (res) => {
						let resData = res.data['data'];
						this.billList = resData['list'];
						
					}
				});
			},
			
		},
		
		
		onLoad: function(options) {
			this.getMyBaseInfo();
			this.getShopSettle();
		},
		
		onPullDownRefresh: function() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200);
			uni.stopPullDownRefresh()
		},
		
		onReachBottom: function() {
		//	this.tui.toast("试试商品搜索的功能吧~")
			return;
		},
		
	}
</script>


<style lang='scss'>
	
	
	/*tabbar*/
	.tui-tabbar {width: 100%; position: fixed; display: flex;align-items: center;justify-content: space-between;z-index: 99999;background: #fff; height: 100rpx;left: 0;bottom: 0;padding-bottom: env(safe-area-inset-bottom);}
	.tui-safearea-bottom {width: 100%;height: env(safe-area-inset-bottom);}
	.tui-tabbar::before {content: ''; width: 100%; border-top: 1rpx solid #d9d9d9;position: absolute;top: 0;left: 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
	.tui-tabbar-item {flex: 1;width: 25%;display: flex;align-items: center;flex-direction: column;justify-content: space-between;font-size: 24rpx;color: #666;height: 80rpx;}
	.tui-ptop-4 {padding-top: 4rpx;}
	.tui-scale {font-weight: bold;transform: scale(0.8);transform-origin: center 100%;line-height: 30rpx;}
	.tui-item-active {color: #e41f19 !important;}
	/*tabbar*/
	
	.price-box {
		background-color: #fff;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #909399;
	}
	
	.price{
		font-size: 50rpx;
		color: #ff4700;
		margin-top: 12rpx;
	}
	
	.price:before{
		content: '￥';
		font-size: 40rpx;
	}
	
	.money-gold{
		margin-top: 12rpx;
		font-size: 30rpx;
	}
	
	.pay-type-list {
		margin-top: 20rpx;
		background-color: #fff;
	}
	
	
	.pay-type-icon{
		width: 100rpx;
		font-size: 52rpx;
	}

	.pay-type-tit{
		font-size: 36rpx;
		color: #222;
		margin-bottom: 4rpx;
	}
	
	.pay-type-con{
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 20rpx;
		color: #aaa;
	}

	.to-pay-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630rpx;
		height: 80rpx;
		margin: 80rpx auto 30rpx;
		font-size: 40rpx;
		color: #fff;
		background-color: #FF5A5F;
		border-radius: 10rpx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	
	
	
	.tui-box {
		width: 100%;
		background: #fff;
		box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.tui-assets-box {
		height: 178rpx;
		margin-top: 20rpx;
	}
	
	.tui-assets-box-list{
		margin-top: 20rpx;
	}
	
	.tui-assets-list {
		height: 84rpx;
	}
	
	.tui-assets-num {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		position: relative;
	}
	
	.tui-assets-text {
		font-size: 24rpx;
		font-weight: 400;
		color: #666;
		padding-top: 6rpx;
	}
	
	.tui-tool-box {
		margin-top: 20rpx;
	}
	
	.tui-flex-wrap {
		flex-wrap: wrap;
		height: auto;
		padding-bottom: 30rpx;
	}
	
	
	.tui-list {
		display: flex;
		align-items: center;
		flex-direction:row;	
		flex-wrap:nowrap;
		justify-content:flex-start;
		align-content:baseline;
	}
	
	.tui-right {
		margin-left: auto !important;
		margin-right: 26rpx !important;
		font-size: 26rpx;
		line-height: 26rpx;
		color: #999;
	}
	
	.tui-list-cell-name {
		padding-left: 20upx;
		vertical-align: middle;
		line-height: 30upx;
	}
	
	
	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

</style>